iWeb horizontal drop down menus...

jenga7 · Aug 13, 2009

okay so i am not too familiar with html but i have been trying to teach myself. so far i'm catching on pretty quick. however, i have been trying to incorporate a menu in a website i am attempting to create. here is the link to the menu i'd like to use:

http://www.alistapart.com/articles/horizdropdowns/

i really like the way its supposed to turn out. but i'm having a little trouble with where the html snippets he's posted go... i can create the list fine but making it look the way its supposed to is another story. and the pop out thing doesn't work whatsoever for me.

like i said, i am new to html and just need to know how to edit the look of lists basically....(using the code provided on the site i posted of course).

any help would be GREATLY appreciated. i've been at this a few days now...

Cerebrus' Maw · Aug 13, 2009

Where he has the framework of the Menu listed out

Code:

  <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a> 
      <ul> 
        <li><a href="#">History</a></li> 
        <li><a href="#">Team</a></li> 
        <li><a href="#">Offices</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Services</a> 
      <ul> 
        <li><a href="#">Web Design</a></li> 
        <li><a href="#">Internet 
            Marketing</a></li> 
        <li><a href="#">Hosting</a></li> 
        <li><a href="#">Domain Names</a></li> 
        <li><a href="#">Broadband</a></li> 
      </ul> 
    </li>
    <li><a href="#">Contact Us</a> 
      <ul> 
        <li><a href="#">United Kingdom</a></li> 
        <li><a href="#">France</a></li> 
        <li><a href="#">USA</a></li> 
        <li><a href="#">Australia</a></li> 
      </ul> 
    </li> 
  </ul>

this goes to where you want your vertical menu to go in your HTML page.

All the CSS (basically where he describe how he wants it to look), such as:

Code:

ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

can either go into a .css file that you reference from your <head> in your html file, or can in fact go into your head, between style tags. Like:

Code:

<html>
    <head>
        <title>My Test Page</title
  
        <style>
             ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}
         <!--And the rest of the styles you need-->
       </style>

       <script>
             <!-- Put the Javascript here -->
      </script>
    </head>
<body>

   <!--Your content-->

</body>
</html>

Once you got it how you feel, you can take your CSS/JS out of your html file if you want, and place it into a .css file (.js for javascript), which you then reference from your html file within the head via:

Code:

.....
   <head>
       <link href="myCssFile.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="myJavascriptFile.js"></script>
   </head>
....

Hope this helps?

If you need help to make the menu act/look like you want to, give us a description of how you want it to look and feel, so can give give you a few tips for your CSS.

jenga7 · Aug 13, 2009

thank you soooo much! i will try this and hope it works!

jenga7 · Aug 13, 2009

alright i basically want the menu to look exactly like his. once i understand how to do it, i can tinker with it some more and change colors etc.

i edited my .js file and everything like you said and i typed the whole <head> thing that links the .js file to the html but for some reason the list looks no different...

Cerebrus' Maw · Aug 13, 2009

Is it possible for you to give a link to where you are hosting this if you can?

Otherwise, copy out our HTML page, and on your next post, put it there and I can have a look for you

jenga7 · Aug 13, 2009

well i'm still making the site so its not published just yet...here is the html source code...

-----------------

<div class="graphic_textbox_style_default" style="height: 435px; left: 237px; position: absolute; top: 166px; width: 224px; z-index: 1; " id="id18">
<div>
<div class="graphic_textbox_layout_style_default">
<div class="paragraph Body" style="line-height: 20px; padding-bottom: 0pt; padding-top: 0pt; "><head>
<link href="Ordering1.css" rel="stylesheet"
type="text/css" />
<script language="javascript"
src="Ordering1.js"></script>
</head>
<ul>
<li><a href="SITE">Nuts & Seeds</a></li>
<ul>
<li><a href="SITE">Almonds</a></li>
<li><a href="SITE">Brazil Nuts</a></li>
<li><a href="SITE">Cashews</a></li>
<li><a href="SITE">Sunflower Seeds</a></li>
</ul>
<li><a href="SITE">Chocolates</a></li>
<ul>
<li><a href="SITE">Raisins</a></li>
<li><a href="SITE">Peanuts</a></li>
<li><a href="SITE">Pretzels</a></li>
</ul>
</ul></div>

---------------------

this is going to be an ordering page for a candy company fyi. none of the links are set up just yet. where it says "SITE" is where the links go as far as i understand.

i'm not sure if thats enough of the script... the rest was the look of the rest of the page...which was really long...

Cerebrus' Maw · Aug 13, 2009

jenga7 said:
well i'm still making the site so its not published just yet...here is the html source code...

-----------------

<div class="graphic_textbox_style_default" style="height: 435px; left: 237px; position: absolute; top: 166px; width: 224px; z-index: 1; " id="id18">
<div>
<div class="graphic_textbox_layout_style_default">
<div class="paragraph Body" style="line-height: 20px; padding-bottom: 0pt; padding-top: 0pt; "><head>
<link href="Ordering1.css" rel="stylesheet"
type="text/css" />
<script language="javascript"
src="Ordering1.js"></script>
</head>
<ul>
<li><a href="SITE">Nuts & Seeds</a></li>
<ul>
<li><a href="SITE">Almonds</a></li>
<li><a href="SITE">Brazil Nuts</a></li>
<li><a href="SITE">Cashews</a></li>
<li><a href="SITE">Sunflower Seeds</a></li>
</ul>
<li><a href="SITE">Chocolates</a></li>
<ul>
<li><a href="SITE">Raisins</a></li>
<li><a href="SITE">Peanuts</a></li>
<li><a href="SITE">Pretzels</a></li>
</ul>
</ul></div>

---------------------

this is going to be an ordering page for a candy company fyi. none of the links are set up just yet. where it says "SITE" is where the links go as far as i understand.

i'm not sure if thats enough of the script... the rest was the look of the rest of the page...which was really long...

Ok, this should be:

Code:

<html>
     <head>
         <title>My page</title>
	<link href="Ordering1.css" rel="stylesheet" type="text/css" />
        <script language="javascript" src="Ordering1.js"></script>
      </head>
  <body>

<div class="graphic_textbox_style_default" style="height: 435px; left: 237px; position: absolute; top: 166px; width: 224px; z-index: 1; " id="id18">
            <div>
              <div class="graphic_textbox_layout_style_default">
                <div class="paragraph Body" style="line-height: 20px; padding-bottom: 0pt; padding-top: 0pt; ">
<ul>
	<li><a href="SITE">Nuts & Seeds</a></li>
	<ul>
	<li><a href="SITE">Almonds</a></li>
	<li><a href="SITE">Brazil Nuts</a></li>
	<li><a href="SITE">Cashews</a></li>
	<li><a href="SITE">Sunflower Seeds</a></li>
	</ul>
	<li><a href="SITE">Chocolates</a></li>
	<ul>
	<li><a href="SITE">Raisins</a></li>
	<li><a href="SITE">Peanuts</a></li>
	<li><a href="SITE">Pretzels</a></li>
	</ul>
</ul></div>
     
</body>
</html>

Copy that, and paste it into your html file (entirely, there should be nothing else) save it and retry.

FYI: All html documents have the same basic layout. the tags that have a </ in them denotes that tags' ending. As you progress, you will understand more, and will start using meta tags, doctypes, conditional's which will allow you to build greater websites.

Code:

<html>
     <head>
           <!--What needs to go in to your header. This includes scripts, 
                  reference to css files, meta tags, your page title. 
                   Basically anything that is needed to run before the page executes-->
     </head>
     <body>
             <!--this is where your content goes. Your divs, 
              your text, your images etc-->
     </body>
</html>

As your reading this, right click, and view the source of this page. Scroll to the top. Note the tags? read on and see if you get the gist.

jenga7 · Aug 13, 2009

i don't get it.... it just creates a regular list.... nothing special about it...

Cerebrus' Maw · Aug 13, 2009

Ok, I think you are not referencing your .css file correctly. Try this.

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

</script>
<style type="text/css">
     ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	}

ul li {
	position: relative;
	}

li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	}

ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	border-bottom: 1px solid #ccc;
	}

li:hover ul { display: block; }
</style>
</head>
<body> 


<ul id="nav"> 
  <li><a href="#">Home</a></li> 
  <li><a href="#">About</a> 
    <ul> 
      <li><a href="#">History</a></li> 
      <li><a href="#">Team</a></li> 
      <li><a href="#">Offices</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Services</a> 
    <ul> 
      <li><a href="#">Web Design</a></li> 
      <li><a href="#">Internet Marketing</a></li> 
      <li><a href="#">Hosting</a></li> 
      <li><a href="#">Domain Names</a></li> 
      <li><a href="#">Broadband</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Contact Us</a> 
    <ul> 
      <li><a href="#">United Kingdom</a></li> 
      <li><a href="#">France</a></li> 
      <li><a href="#">USA</a></li> 
      <li><a href="#">Australia</a></li> 
    </ul> 
  </li> 

</ul> 
</body>
</html>

This works fine for me here.

adamfishercox · Aug 13, 2009

You realize they are trying to do this in iWeb, correct?

jenga7 · Aug 13, 2009

it must have had something to do with the css file...

you are a freaking genius! haha. thank you SO much! this is like my third day glued to this computer trying to decipher that crap.... you're a lifesaver

Search

Search

iWeb horizontal drop down menus...

jenga7

macrumors newbie

Cerebrus' Maw

macrumors 6502

jenga7

macrumors newbie

jenga7

macrumors newbie

Cerebrus' Maw

macrumors 6502

jenga7

macrumors newbie

Cerebrus' Maw

macrumors 6502

jenga7

macrumors newbie

Cerebrus' Maw

macrumors 6502

adamfishercox

macrumors 6502

jenga7

macrumors newbie

Our Staff